<!-- 内容管理 -->
<template>
  <header>
    <p>用户端Banner</p>
    <el-button @click="openDialog()" type="primary">添加新内容</el-button>
  </header>
  <el-table :data="tableList" style="width: 100%" v-loading="loading">
    <el-table-column prop="img" label="缩略图" align="center">
      <template #default="scope">
        <el-image
          style="width: 150px; height: 100px"
          :src="scope.row.img"
          fit="scale-down"
          :preview-teleported="true"
          :zoom-rate="1.2"
          :preview-src-list="srcList()"
          :initial-index="scope.index"
          :z-index="99999"
        />
      </template>
    </el-table-column>
    <el-table-column prop="column" label="所属栏目" align="center" />
    <el-table-column prop="solt" label="序列编号" align="center" />
    <el-table-column prop="type" label="内容类型" align="center" />
    <el-table-column prop="describe" label="内容描述" align="center" />
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button link @click="openDialog(scope.row.id)" type="primary">管理内容</el-button>
        <el-button link type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <footer class="pagination">
    <el-pagination
      v-model:currentPage="ruleForm.page"
      v-model:page-size="ruleForm.limit"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      small
    />
  </footer>

  <ContentDetailDialog v-model:show="showDialog"  :detailId="detailId"></ContentDetailDialog>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import ContentDetailDialog from './components/ContentDetailDialog.vue'

//总数
const total = ref(0)
const ruleForm = reactive({
  page: 1,
  limit: 20,
})

//表格数据
const tableList = reactive([
  {
    img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    column: '首页',
    solt: 'A1',
    type: '常规运营',
    describe: '平台拉新奖励活动',
  },
])
const srcList = () => {
  return tableList.map((item) => item.img)
}

//加载
const loading = ref(false)
//获取表格数据
const getTableList = () => {}
//改变每页条数
const handleSizeChange = (val: number) => {
  ruleForm.page = 1
  ruleForm.limit = val
  getTableList()
}
//改变当前页数
const handleCurrentChange = (val: number) => {
  ruleForm.page = val
  getTableList()
}

//弹框开关
const showDialog=ref(false)
//详情id
const detailId=ref()
//打开详情弹框
const openDialog=(id?:string)=>{
  detailId.value=id||null
  showDialog.value=true
}
</script>
<style scoped lang="scss">
header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-weight: bold;
}
</style>
